<template>
  <van-list
    class="list"
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
    offset="0"
  >
    <div v-for="item in list" :key="item.proid" class="sp" @click="goDetailVue(item.proid)">
      <img :src="item.img1" />
      <p class="title">{{ item.proname }}</p>
      <p class="price">￥{{ item.originprice }}</p>
    </div>
  </van-list>
</template>

<script>
import axios from "axios";

export default {
  name: "GoodsList",
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      pageIndex: 1,
      goodsList: [],
    };
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      axios({
        url: "/api/pro/list",
        params: {
          count: this.pageIndex,
          limitNum: 10,
        },
      })
        .then((res) => {
          if (res.data.code == 200) {
            this.list = [...this.list, ...res.data.data];
            // console.log("res.data.date", res.data.data);
            this.loading = false;
            this.pageIndex++;
          }
        })
        .catch((err) => {
          console.log(err, "err");
        });
    },
    goDetailVue(id){
      // console.log(id);
      this.$router.push("/DetailVue/"+id)
    }
  },
};
</script>

<style scoped>
.list {
  width: 100%;
  column-count: 2;
  font-size: 0.875rem;
  background-color: #ededed;
  column-gap: 0.3125rem;
}
.list .sp {
  width: 100%;
  text-align: center;
  background-color: white;
  border-radius: 0.625rem;
  break-inside: avoid;
  margin-bottom: 0.625rem;
}
.list .sp img {
  border-radius: 0.5rem;
  width: 90%;
  margin-top: 0.625rem;
}
.list .sp .title {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0.625rem 0;
}
.list .sp .price {
  text-align: left;
  color: orange;
  font-size: 1.125rem;
}
</style>